<template>
  <div class="base-table">
    <el-table :data="mydata">
      <el-table-column
        type="selection"
        width="55"
        align="center"
        v-if="checkbox"
      >
      </el-table-column>
      <el-table-column
        v-for="item in mytitle"
        :key="item.name"
        :prop="item.prop"
        :label="item.name"
        :width="item.width"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="item.prop === 'status'">
            <span v-if="type === 'gd' || type === 'khxq'">
              <span v-if="scope.row.status === '完成'" style="color: #2ed477"
                ><el-tag type="danger">{{ scope.row.status }}</el-tag></span
              >
              <span v-if="scope.row.status === '已分配'" style="color: #2ed477"
                ><el-tag type="success">{{ scope.row.status }}</el-tag></span
              >
              <span v-if="scope.row.status === '未分配'" style="color: #2ed477"
                ><el-tag type="info">{{ scope.row.status }}</el-tag></span
              >
              <span v-if="scope.row.status === '处理中'" style="color: #2ed477"
                ><el-tag type="warning">{{ scope.row.status }}</el-tag></span
              >
            </span>
            <span v-else>
              <span v-if="scope.row.status === '在线'" style="color: #2ed477">{{
                scope.row.status
              }}</span>
              <span v-else>{{ scope.row.status }}</span>
            </span>
          </span>
          <span v-else-if="item.prop === 'tag'">
            <el-tag type="success">{{ scope.row[item.prop] }}</el-tag>
          </span>
          <span v-else-if="item.prop === 'g'">
            <el-switch
              v-model="scope.row[item.prop]"
            >
            </el-switch>
          </span>
          <span v-else>
            {{ scope.row[item.prop] }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="110"
        v-if="type === 'fk'"
      >
        <template>
          <router-link to="/main/huihua">
            <span style="color: #006eff">发起会话</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="180"
        v-if="type === 'kh'"
      >
        <template>
          <router-link to="/main/kehudetail">
            <span style="color: #006eff; margin-right: 15px">详情</span>
          </router-link>
          <span style="color: #006eff; margin-right: 15px">创建工单</span>
          <el-button type="text" @click="dialogFormVisible = true"
            ><span style="color: #006eff; margin-right: 15px"
              >删除</span
            ></el-button
          >
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="135"
        v-if="type === 'gd'"
      >
        <template>
          <router-link to="/main/gongdandetail">
            <span style="color: #006eff; margin-right: 10px">查看详情</span>
          </router-link>
          <el-button type="text" @click="jiedan"
            ><span style="color: #006eff; margin-right: 1px"
              >接单</span
            ></el-button
          >
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="135"
        v-if="type === 'khxq'"
      >
        <template>
          <router-link to="/main/gongdan">
            <span style="color: #006eff; margin-right: 10px">查看详情</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="100"
        v-if="type === 'hmd'"
      >
        <template>
          <router-link to="/main/kehudetail">
            <span style="color: #006eff; margin-right: 10px">详情</span>
          </router-link>

          <span style="color: #006eff; margin-right: 10px">解禁</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="178"
        v-if="type === 'gdfl'"
      >
        <template>
          <span style="color: #006eff; margin-right: 10px">编辑</span>
          <span style="color: #006eff; margin-right: 10px">删除</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="185"
        v-if="type === 'jsgl'"
      >
        <template>
          <span style="color: #006eff; margin-right: 10px">编辑</span>
          <span style="color: #006eff; margin-right: 10px">删除</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="185"
        v-if="type === 'fzgl'"
      >
        <template>
          <span style="color: #006eff; margin-right: 10px">编辑</span>
          <span style="color: #006eff; margin-right: 10px">删除</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="235"
        v-if="type === 'khxx'"
      >
        <template>
          <span style="color: #006eff; margin-right: 10px">编辑</span>
          <span style="color: #006eff; margin-right: 10px">删除</span>
          <span style="color: #006eff; margin-right: 10px">上移</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="123"
        v-if="type === 'kfgl'"
      >
        <template>
          <span style="color: #006eff; margin-right: 10px">编辑</span>
          <span style="color: #006eff; margin-right: 10px">删除</span>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="删除确认" :visible.sync="dialogFormVisible" width="30%">
      <span> 客户信息删除后无法恢复，确定删除此客户信息吗？ </span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteTrue">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["mydata", "mytitle", "type", "checkbox"],
  created() {
    console.log(this.mytitle);
  },
  data() {
    return {
      dialogFormVisible: false,
    };
  },
  methods: {
    deleteTrue() {
      this.dialogFormVisible = false;
      this.$message({
        message: "删除成功",
        type: "success",
      });
    },
    jiedan() {
      this.$message({
        message: "接单成功",
        type: "success",
      });
    },
  },
};
</script>

<style>
.base-table {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
}

.base-table .el-table {
  background-color: transparent;
}

.head .el-select {
  width: 160px;
  height: 40px;
}

.head .el-input__inner {
  background-color: #f2f2f2;
  border: none;
}

.head .head-a:hover .el-input__inner {
  background-color: #ffffff;
}

.head input::-webkit-input-placeholder {
  color: black;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
}

.base-table .el-table thead tr th {
  background-color: rgba(0, 110, 255, 0.0980392156862745);
  height: 56px;
  font-family: "PingFangSC-Medium", "PingFang SC Medium", "PingFang SC",
    sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 13px;
  color: #999999;
}
.base-table .el-table tbody tr td {
  height: 56px;
}
.base-table .el-table tbody tr:hover > td {
  background-color: rgba(0, 110, 255, 0.0980392156862745) !important;
}
</style>